<template>
  <div class="Personlist">
  <x-header :left-options="{showBack: true,  backText:''}">我的账号</x-header>
    <section class="my">
        <div class="weui-cells"><div class="weui-cell weui-cell_access"><div class="weui-cell__bd">头像</div><div class="weui-cell__ft"><img v-bind:src="avatar" alt=""></div></div></div>
        <div class="weui-cells"><div class="weui-cell weui-cell_access"><div class="weui-cell__bd">用户名</div><div class="weui-cell__ft"><span>{{name}}</span></div></div></div>
    </section>
  </div>
</template>

<script>
import { XHeader } from 'vux'
export default {
  name: 'Personlist',
  components: {
    XHeader
  },
  data:function(){
    return {
      name:'',
      avatar:'',
    }
  },
  mounted:function(){
    let info = JSON.parse(localStorage.getItem('userInfo'));
        this.name = info.nickname;
        this.avatar = info.headimgurl;
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* 个人中心 */
.my .weui-cells{
  margin-top: 4.4rem;
  line-height: 1.45rem;
}
.my .weui-cell{
  height: 45px;
  padding: 15px 20px;
}
.my .weui-cells .weui-cell__bd{
  color: #3f3f3f;
  font-size: 16px;
}
.weui-cells:nth-child(2){
  margin-top: -1px!important;
}
.vux-header{
  background-color: #Fe4e43;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  width: 100%;
}
.weui-cell__ft span{
  margin-right: 0.5rem;
}
.my .weui-cell__ft img{
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  margin-right: 0.5rem;
}
.my .weui-cell_access .weui-cell__ft:after {
    height: 10px;
    width: 10px;
    border-width: 3px 3px 0 0;
}
</style>
